<template>
  <div class="container">
    <scroll-view scroll-y="true" style="height: 100vh;">
      <div class="mainContent">
        <div class="singleUserMsg avatar">
          <div class="leftLabel">头像</div>
          <img v-if="userData.avatar" class="userAvatar" :src="userData.avatar" alt="">
          <img v-else class="userAvatar" src="/static/images/defaultAvatar.png" alt="">
        </div>
        <div class="singleUserMsg">
          <div class="leftLabel">账号类型</div>
          <div class="rightMsg">{{ userData.userTypeLabel }}</div>
        </div>
        <div class="singleUserMsg">
          <div class="leftLabel">昵称</div>
          <div class="rightMsg">{{ userData.nickName || '--' }}</div>
        </div>
        <div class="singleUserMsg">
          <div class="leftLabel">姓名</div>
          <div class="rightMsg">{{ userData.name || '--' }}</div>
        </div>
        <div class="singleUserMsg">
          <div class="leftLabel">性别</div>
          <div class="rightMsg">{{ userData.sex === 1 ? '男' : userData.sex === 2 ? '女' : '未知' }}</div>
        </div>
        <div class="singleUserMsg">
          <div class="leftLabel">城市</div>
          <div class="rightMsg">{{ userData.labels || '--' }}</div>
        </div>
        <div class="singleUserMsg">
          <div class="leftLabel">学校</div>
          <div class="rightMsg">{{ userData.title || '--' }}</div>
        </div>
        <div class="singleUserMsg">
          <div class="leftLabel">年级</div>
          <div class="rightMsg">{{ (userData.gradeId === 1 ? '高一' : (userData.gradeId === 2 ? '高二' : '高三')) + userData.className }}</div>
        </div>
      </div>
    </scroll-view> 
  </div>  
</template>

<script>
export default {
  onLoad (option) {
    this.userId = parseInt(option.userId)
    // 设置导航标题
    if (option.type === '家长') {
      wx.setNavigationBarTitle({
        title: '家长信息'
      })
    } else {
      wx.setNavigationBarTitle({
        title: '学生信息'
      })
    }
  },
  data () {
    return {
      userId: null,
      userData: {}
    }
  },
  mounted () {
    this.getUserData()
  },
  methods: {
    getUserData () {
      this.$httpWX.post({
        url: '/academy/teacher/myStudentPersonalInfo/' + this.userId,
        header: {
          'content-type': 'application/json', // 默认值
          'accessToken': wx.getStorageSync('tokens')
        }
      }).then(res => {
        this.userData = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .mainContent {
    .singleUserMsg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 100rpx;
      border-bottom: 1rpx solid #E5E5E5;
      padding: 0 53rpx 0 50rpx;
      box-sizing: border-box;
      .leftLabel {
        color: #000;
        font-size: 28rpx;
        font-weight: bold;
      }
      .userAvatar {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
      }
      .rightMsg {
        color: #999999;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
    .avatar {
      height: 150rpx;
      padding-right: 31rpx;
    }
  }
</style>
